<template>
  <div class="cont">
    <div class="textstyle">
      <div class="box" @click="goPage('氢气')">
        <div class="left items">氢气</div>
        <div class="right items">
          <span>{{curAuxBySb['030101'].value}}</span>
          <span>{{curAuxBySb['030101'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('甲烷')">
        <div class="left items">甲烷</div>
        <div class="right items">
          <span>{{curAuxBySb['030106'].value}}</span>
          <span>{{curAuxBySb['030106'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('氮气')">
        <div class="left items">氮气</div>
        <div class="right items">
          <span>{{curAuxBySb['030102'].value}}</span>
          <span>{{curAuxBySb['030102'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('氧气')">
        <div class="left items">氧气</div>
        <div class="right items">
          <span>{{curAuxBySb['030103'].value}}</span>
          <span>{{curAuxBySb['030103'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('微水')">
        <div class="left items">微水</div>
        <div class="right items">
          <span>{{curAuxBySb['030111'].value}}</span>
          <span>{{curAuxBySb['030111'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('乙烷')">
        <div class="left items">乙烷</div>
        <div class="right items">
          <span>{{curAuxBySb['030108'].value}}</span>
          <span>{{curAuxBySb['030108'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('乙烯')">
        <div class="left items">乙烯</div>
        <div class="right items">
          <span>{{curAuxBySb['030107'].value}}</span>
          <span>{{curAuxBySb['030107'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('乙炔')">
        <div class="left items">乙炔</div>
        <div class="right items">
          <span>{{curAuxBySb['030109'].value}}</span>
          <span>{{curAuxBySb['030109'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('一氧化碳')">
        <div class="left items">一氧化碳</div>
        <div class="right items">
          <span>{{curAuxBySb['030104'].value}}</span>
          <span>{{curAuxBySb['030104'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('二氧化碳')">
        <div class="left items">二氧化碳</div>
        <div class="right items">
          <span>{{curAuxBySb['030105'].value}}</span>
          <span>{{curAuxBySb['030105'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('总烃')">
        <div class="left items">总烃</div>
        <div class="right items">
          <span>{{curAuxBySb['030110'].value}}</span>
          <span>{{curAuxBySb['030110'].unit}}</span>
        </div>
      </div>
      <div class="box" @click="goPage('可燃气体')">
        <div class="left items">可燃气体</div>
        <div class="right items">
          <span>{{curAuxBySb['030118'].value}}</span>
          <span>{{curAuxBySb['030118'].unit}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  get curAuxByStationId() {
    let getterAllAuxiliaryByStationId =
      GetSocketModule.getterAllAuxiliaryByStationId || {};
    let stationId = this.stationId || "";
    let curAuxByStationId = getterAllAuxiliaryByStationId[stationId] || [];
    return curAuxByStationId;
  }
  get curAuxBySb() {
    let obj = {
      "030101": {
        value: 0,
        unit: "ppm",
      }, //"氢气浓度"
      "030102": {
        value: 0,
        unit: "ppm",
      }, //"氮气"
      "030103": {
        value: 0,
        unit: "ppm",
      }, //"氧气"
      "030104": {
        value: 0,
        unit: "ppm",
      }, //"一氧化碳浓度"
      "030105": {
        value: 0,
        unit: "ppm",
      }, //"二氧化碳浓度"
      "030106": {
        value: 0,
        unit: "ppm",
      }, //"甲烷浓度"
      "030107": {
        value: 0,
        unit: "ppm",
      }, //"乙烯浓度"
      "030108": {
        value: 0,
        unit: "ppm",
      }, //"乙烷浓度"
      "030109": {
        value: 0,
        unit: "ppm",
      }, //"乙炔浓度"
      "030110": {
        value: 0,
        unit: "ppm",
      }, //"总烃浓度"
      "030111": {
        value: 0,
        unit: "mg/L",
      }, //"微水含量"
      "030118": {
        value: 0,
        unit: "ppm",
      }, //"可燃气体"
    };
    let SBID = this.PMSID;
    let curAuxByStationId = this.curAuxByStationId;
    // console.log(curAuxByStationId)
    curAuxByStationId.forEach((v) => {
      let sbId = v.equipId;
      if (sbId === SBID) {
        obj[v.type] = v;
      }
    });
    return obj;
  }
  stationId = "";
  stationName = "";
  SBID = "";
  SBMC = "";
  PMSID = "";
  mounted() {
    this.setCurrentData();
  }
  setCurrentData() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    let stationName: any = query.BDZMC;
    let SBID: any = query.SBID;
    let PMSID: any = query.PMSID;
    let SBMC: any = query.SBMC;
    this.stationId = stationId;
    this.stationName = stationName;
    this.SBID = SBID;
    this.PMSID = PMSID;
    this.SBMC = SBMC;
  }
  goPage(name) {}
}
</script>

<style lang="scss" scoped>
.cont {
  width: 100%;
  height: calc(100% - 0.27rem);
  box-sizing: border-box;
  padding: 0.05rem 0 0 0.05rem;
  .textstyle {
    width: 100%;
    height: 100%;
    display: flex;
    // align-items: center;
    // justify-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
    .box {
      width: calc(33.33% - 0.05rem);
      height: calc(25% - 0.05rem);
      border: 2px solid #1489c9;
      display: flex;
      margin-bottom: 0.05rem;
      margin-right: 0.05rem;
    }
    .items {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .left {
      width: 60%;
      background-color: #1654aa;
      font-size: 0.16rem;
    }
    .right {
      width: 40%;
      font-size: 0.16rem;
    }
  }
}
</style>

